<template>
  <div>
    <div class="flexrow" style="margin-bottom:20px;">
      <div>
        <a-input-search
          placeholder="请输入用户账号"
          @search="onSearch"
          enterButton="搜索"
          :loading="searchLoading"
          v-model="searchText"
          style="width:220px;"
        />
        <!-- <a-checkbox style="line-height: 32px;margin-left: 20px;" @change="sortChange">
          用户排序
        </a-checkbox> -->
      </div>
      <div>
        <a-button type="primary" @click="delUser">删除用户</a-button>
      </div>
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" 
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange"
      :customHeaderRow="clickHeaderRow"
    >
      <template slot="avatar" slot-scope="text,record"> <img class="user_avatar" :src="record.avatar" alt=""> </template>  
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="is_enable"  slot-scope="text,record"> 
           <span :class="{ redColor: record.is_enable=='禁用', greenColor: record.is_enable=='正常' }">{{record.is_enable}}</span>
      </template>
      <template slot="action"  slot-scope="text,record">
        <a-dropdown placement="bottomCenter">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            操作 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <span @click="checkItem(record)"> {{record.is_enable == '正常'?'禁用用户':'启用用户'}}</span>
              <!-- <a-button  type="primary" @click="taskTop(record)"> {{record.task_top==1?'取消置顶':'任务置顶'}}</a-button> -->
            </a-menu-item>
            <a-menu-item>
              <span @click="checkDetail(record)">查看详情</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="upIntegral(record)">修改积分</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </a-table>
    <a-modal title="修改用户积分" v-model="modalUp"  :width="600" @ok="setTaskNumber">
      <div class="up_number">
        <a-radio-group v-model="task_number_type" button-style="solid">
          <a-radio-button value="1">
            增加
          </a-radio-button>
          <a-radio-button value="2">
            减少
          </a-radio-button>
        </a-radio-group>
        <a-input  v-model="task_number" class="up_number_in" placeholder="请输入数量" :maxLength="10" />
      </div>
      <div style="display: flex;">
        <span style="width: 119px;line-height: 32px;text-align: right;box-sizing: border-box;"> <span style="color:red">*</span> 备注：</span> <a-input class="up_number_in" v-model="upIntegralNote" placeholder="填写备注" :maxLength="10" />
      </div>
    </a-modal>
  </div>
    
</template>

<script>
import { getUserList, setEnable } from '@/api/login'
import { deleteUser, memberOpIntegral } from '@/api/getData'
export default {
  name: 'UserList',
  components: {
   
  },
  data () {
    return {
        selectedRowKeys: [],
        // 表头
        columns: [
            {
            title: (c)=>{
              if(this.sortText == "正序"){
                return "序号↑"
              }else{
                return "序号↓"
              }
              
            },
            dataIndex: 'sortId'
            },
            {
            title: '头像',
            dataIndex: 'avatar',
            scopedSlots: { customRender: 'avatar' }
            },
            {
            title: '用户昵称',
            dataIndex: 'nickname'
            },
            {
            title: '账号',
            dataIndex: 'phone'
            },
            {
            title: '余额',
            dataIndex: 'balance'
            },
            {
            title: '状态',
            dataIndex: 'is_enable',
            scopedSlots: { customRender: 'is_enable' }
            },
            {
            title: '最后登录时间',
            dataIndex: 'last_time'
            },
            {
            title: '上级ID',
            dataIndex: 'agent_id'
            },
            {
            title: '创建时间',
            dataIndex: 'create_time'
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: '',
        sortText: '正序',
        modalUp: false,
        task_number_type: '1',
        task_number_old: '',
        usetItem: '',
        upIntegralNote: ''
    }
  },
  computed:{
    task_number:{
      get:function(){
          return this.task_number_old;
      },
      set:function(newValue){
          this.task_number_old=newValue.replace(/[^\d]/g,'');
      }
    }
  },
  mounted () {
    this.initUserList()
  },
  methods: {
    upIntegral(item){
      this.usetItem = item
      this.modalUp = true
    },
    setTaskNumber(){
      if(this.task_number == '' || Number(this.task_number) == 0){
        this.$message.error("请填积分数")
        return
      }
      if(!this.upIntegralNote){
        this.$message.error("请填写备注")
        return
      }
      console.log(this.task_number)
      let task_number = this.task_number;
      if(this.task_number_type=='2'){
        task_number = '-'+task_number
      }
      this.modalUp = false
      memberOpIntegral(this.usetItem.id,this.task_number_type,task_number,this.upIntegralNote).then(res=>{
        console.log(res)
        this.initUserList()
      })
    },
    clickHeaderRow(record, index){
      let that = this;
      return {
        on: {
          click: (e) => {
            if(e.target.innerText == "序号↑" || e.target.innerText == "序号↓"){
              if(that.sortText == '正序'){
                that.sortText = '倒序'
              }else{
                that.sortText = '正序'
              }
              that.initUserList()
            }
            // this.getDetailList(record.matbillid)
          }
        }
      }
    },
    sortChange(e){
      if(this.sortText == '正序'){
        this.sortText = '倒序'
      }else{
        this.sortText = '正序'
      }
      this.initUserList()
    },
    delUser(){
      if(this.selectedRowKeys.length==0){
        return
      }
      let that = this
      this.$confirm({
          title: '确认删除所选用户?',
          content: '',
          onOk() {
              let userid = '';
              for(let key in that.selectedRowKeys){
                userid += that.selectedRowKeys[key] + ','
              }
              deleteUser(userid.slice(0,-1)).then(res=>{
                console.log(res)
                that.initUserList()
              })
          },
          onCancel() {}
      });
      
    },
    checkDetail(record){
        console.log(record)
        sessionStorage.setItem("userItem",JSON.stringify(record));
        this.$router.push({path: '/useradmin/userDetail'})
    }, 
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    checkcap(){

    },
    initUserList(){
      this.tableLoding = true
      let userSort = ''
      if(this.sortText == '正序'){
        userSort = 'DESC'
      }else{
        userSort = 'ASC'
      }
      getUserList(this.pagination.current,this.pagination.pageSize,this.searchText,userSort).then(res=>{
          console.log(res)
          let list = res.data.list
          for(let i=0;i<list.length;i++){
            list[i].sortText = this.sortText
          }
          console.log(list)
          this.list = list
          this.pagination.total = res.data.total
      }).finally(e=>{
        this.tableLoding = false
        this.searchLoading = false
        this.searchText = ''
      })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.initUserList()
    },
    checkItem(record){
      // console.log(record)
      let user = {}
      user.user_id = record.id
      if(record.is_enable == '正常'){
        user.is_enable = 1
      }else{
        user.is_enable = 0
      }
      setEnable(user).then(res=>{
        console.log(res)
        this.initUserList()
      })
    },
    onSearch(){
      this.searchLoading = true
      this.initUserList()
    }
  }
}
</script>

<style scoped>
.user_avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.user_btn{
  background:#fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.flexrow{
  display: flex;
  justify-content: space-between;
}
.up_number{
  display: flex;
  margin-top: 15px;
  margin-bottom: 30px;
}
.up_number_in{
  flex: 1;
  margin-left: 30px;
}
</style>
